/**
 * Created by zhulizhe on 2017/9/5.
 */
import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    TextInput,
    View,
    TouchableOpacity,
    Image,
    ScrollView,
    Platform,
    Dimensions
} from 'react-native';
import Contant from "../Contant";
import {Star} from "../home/Home"
import {observer} from "mobx-react";
import {observable} from 'mobx'
import ImagePicker from 'react-native-image-picker';

const {width} = Dimensions.get('window') ;


const products = [
    {
        name: '喜腾山泉天然饮用水',
        selected: false
    },
    {
        name: '怡宝纯净水',
        selected: false
    },
    {
        name: '哇哈哈',
        selected: false
    },
    {
        name: '恒大冰泉',
        selected: false
    }
]


class Comment extends Component{

    constructor(props) {
        super(props);
        this.state = {textValue: ''};
    }

    render(){
        return <View style={{backgroundColor:'#fff'}}>
            <View style={{paddingHorizontal:10}}>
                <Products
                    onPress={p => {
                        let tempTags = this.tags;
                        this.tags = tempTags.concat([p.name]);
                    }}
                    products={products}/>
            </View>
            <View style={{width:width,alignItems:'center'}}>
                <TextInput
                    placeholder='商品还满意吗？发表一下评价吧'
                    multiline={true}
                    numberOfLines={3}
                    style={styles.textInputStyle}
                />
            </View>
        </View>
    }

    _onChangeText(text){

    }
}

const Products = observer(({products, onPress}) => {
    return <View style={{flexWrap: 'wrap', flexDirection: 'row'}}>
        {
            products.map((p, index) => {
                return <TouchableOpacity
                    onPress={() => {
                        onPress(p);
                    }}
                    key={index}
                    style={[styles.productStyle, styles.borderBottom]}>
                    <Text>{p.name}</Text>
                </TouchableOpacity>
            })
        }
    </View>
})

const StarJudge = ({onChange, size = 42, count = 5}) => {
    return (<View style={{justifyContent: 'center', alignItems: 'center', paddingVertical: 10}}>
        <Star
            onChange={onChange}
            size={size}
            count={count}/>
    </View>)
}

const Tags = observer(({tags, onChange, removeIndex}) => {

    const inputProps = {
        keyboardType: 'default',
        placeholder: '评价一下商品',
        autoFocus: true,
    };

    return <TagInput
        onChange={onChange}
        removeIndex={removeIndex}
        value={tags}
        tagTextColor={Contant.BLUECOLOR}
        inputProps={inputProps}
        numberOfLines={2}
    />
})

@observer
class ItemJudge extends Component {

    @observable tags = [];

    render() {

        return <View style={{padding: 5}}>
            <View style={{
                alignItems: 'center',
                marginHorizontal: 5,
                backgroundColor: Contant.GRAYBGCOLOR
            }}>
                <Comment/>
            </View>
        </View>
    }
}

const AvatarInfo = ({title,image,desc}) => {
    return <View style={{flexDirection: 'row', alignItems: 'center', padding: 10}}>
        <Image
            style={{
                borderRadius:6,
                borderWidth:1,
                borderColor:Contant.TEXT_COLOR_D7,
                width: 50,
                height: 50,
                resizeMode: 'contain'}}
            source={{uri: 'http://www.qq745.com/uploads/allimg/141106/1-141106153Q5.png'}}/>
        <Text style={{paddingLeft: 10, fontSize: 16, color: Contant.TEXT_COLOR_6}}>赵伟志</Text>
    </View>
}

// 店铺信息
const ShopInfo = () => {
    return <AvatarInfo/>
}

const Picture = observer(({images, onChange}) => {

    const onPress = () => {
        const options = {
            title: '选择图片',
            storageOptions: {
                skipBackup: true,
                path: 'images'
            }
        };
        ImagePicker.showImagePicker(options, response => {
            let source = {uri: response.uri};
            onChange(source);
        })
    }
    return <View style={{flexWrap: 'wrap', flexDirection: 'row', padding: 10}}>
        {
            images.map((img, index) => {
                return <TouchableOpacity
                    key={index}
                    onPress={onPress}
                >
                    <Image
                        resizeMode="cover"
                        key={index}
                        style={{width: 50, height: 50, margin: 5,}}
                        source={img ? img : {uri: 'http://www.qq745.com/uploads/allimg/141106/1-141106153Q5.png'}}/>
                </TouchableOpacity>
            })
        }
    </View>
})

// 商品评价
// @observer
class ProductJudge extends Component {

    @observable images = [null];

    render() {
        return <View style={{backgroundColor: '#fff'}}>
            <View style={{padding: 10}}>
                <ShopInfo/>
            </View>
            <StarJudge
                onChange={index => {

                }}/>
            <ItemJudge/>
            <View>
                <Picture
                    onChange={(source) => {
                        this.images.push(source);
                    }}
                    images={this.images}/>
            </View>
        </View>
    }
}

// 配送员评价
const DeliveryJudge = () => {

    const Judgement = () => {
        return <View style={{
            width: '100%' - 20,
            height: 120,
            marginHorizontal: 10,
            backgroundColor: Contant.GRAYBGCOLOR,
            marginBottom: 20
        }}>
            <TextInput style={{fontSize: 13, padding: 10}} placeholder="准时到达"/>
        </View>
    }

    return <View style={{
        marginTop: 15,
        backgroundColor: '#fff'
    }}>
        <AvatarInfo/>
        <StarJudge
            onChange={index => {

            }}/>
        <Judgement/>
    </View>
}

const Footer = () => {
    return <View style={{
        position: 'absolute',
        height: 50,
        left: 0,
        right: 0,
        bottom: 0,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff'
    }}>
        <TouchableOpacity>
            <Text style={{color: Contant.BLUECOLOR, fontSize: 14}}>发表评价</Text>
        </TouchableOpacity>
    </View>
}

export default class Judge extends Component {
    static navigationOptions = {
        title: '评价',
    };


    render() {
        return <View style={{
            flex: 1,
            backgroundColor: Contant.GRAYBGCOLOR,
            flexDirection: 'row',
        }}>
            <ScrollView style={{flex: 1}}>
                <ProductJudge/>
                {/*<DeliveryJudge/>*/}
            </ScrollView>
            <Footer/>
        </View>
    }
}

const styles = {
    productStyle: {
        paddingHorizontal: 10,
        paddingVertical: 8,
        margin: 5
    },
    borderBottom: {
        borderColor: Constant.SEPLINECOLOR,
        borderWidth: StyleSheet.hairlineWidth,
        borderRadius: 4
    },
    container: {
        backgroundColor: '#F5FCFF',
        justifyContent: 'center',
        alignItems: 'center'
    },
    textInputStyle: { //文本输入组件样式
        width: width-30,
        height: 50,
        fontSize: 14,
        paddingHorizontal:10,
        backgroundColor:Contant.GRAYBGCOLOR
    }
}